body {
  background: #fa0;
  animation: 40s infinite background-color-change;
}

.pendulum {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -16px;
  width: 32px;
  text-align: center;
  transform-origin: 50% 0;
  will-change: transform;
  animation: 1s ease-in-out infinite pendulum-swing;
}
.pendulum::before, .pendulum::after {
  content: "";
  display: block;
}
.pendulum::before {
  margin: 0 auto;
  width: 1px;
  height: 80px;
  background: rgba(255, 255, 255, 0.6);
}
.pendulum::after {
  width: 32px;
  height: 32px;
  background: #fa0;
  border-radius: 50%;
  background: radial-gradient(circle at 10px 10px, #fff, #555);
  box-shadow: inset -3px -3px 3px rgba(68, 68, 68, 0.3);
}
.pendulum:nth-of-type(0) {
  z-index: 16;
  animation-delay: 1.3333333333s;
}
.pendulum:nth-of-type(0)::before {
  height: 80px;
}
.pendulum:nth-of-type(1) {
  z-index: 15;
  animation-delay: 1.3793103448s;
}
.pendulum:nth-of-type(1)::before {
  height: 102px;
}
.pendulum:nth-of-type(2) {
  z-index: 14;
  animation-delay: 1.4285714286s;
}
.pendulum:nth-of-type(2)::before {
  height: 124px;
}
.pendulum:nth-of-type(3) {
  z-index: 13;
  animation-delay: 1.4814814815s;
}
.pendulum:nth-of-type(3)::before {
  height: 146px;
}
.pendulum:nth-of-type(4) {
  z-index: 12;
  animation-delay: 1.5384615385s;
}
.pendulum:nth-of-type(4)::before {
  height: 168px;
}
.pendulum:nth-of-type(5) {
  z-index: 11;
  animation-delay: 1.6s;
}
.pendulum:nth-of-type(5)::before {
  height: 190px;
}
.pendulum:nth-of-type(6) {
  z-index: 10;
  animation-delay: 1.6666666667s;
}
.pendulum:nth-of-type(6)::before {
  height: 212px;
}
.pendulum:nth-of-type(7) {
  z-index: 9;
  animation-delay: 1.7391304348s;
}
.pendulum:nth-of-type(7)::before {
  height: 234px;
}
.pendulum:nth-of-type(8) {
  z-index: 8;
  animation-delay: 1.8181818182s;
}
.pendulum:nth-of-type(8)::before {
  height: 256px;
}
.pendulum:nth-of-type(9) {
  z-index: 7;
  animation-delay: 1.9047619048s;
}
.pendulum:nth-of-type(9)::before {
  height: 278px;
}
.pendulum:nth-of-type(10) {
  z-index: 6;
  animation-delay: 2s;
}
.pendulum:nth-of-type(10)::before {
  height: 300px;
}
.pendulum:nth-of-type(11) {
  z-index: 5;
  animation-delay: 2.1052631579s;
}
.pendulum:nth-of-type(11)::before {
  height: 322px;
}
.pendulum:nth-of-type(12) {
  z-index: 4;
  animation-delay: 2.2222222222s;
}
.pendulum:nth-of-type(12)::before {
  height: 344px;
}
.pendulum:nth-of-type(13) {
  z-index: 3;
  animation-delay: 2.3529411765s;
}
.pendulum:nth-of-type(13)::before {
  height: 366px;
}
.pendulum:nth-of-type(14) {
  z-index: 2;
  animation-delay: 2.5s;
}
.pendulum:nth-of-type(14)::before {
  height: 388px;
}
.pendulum:nth-of-type(15) {
  z-index: 1;
  animation-delay: 2.6666666667s;
}
.pendulum:nth-of-type(15)::before {
  height: 410px;
}
.pendulum:nth-of-type(16) {
  z-index: 0;
  animation-delay: 2.8571428571s;
}
.pendulum:nth-of-type(16)::before {
  height: 432px;
}

@keyframes pendulum-swing {
  0% {
    transform: rotate(25deg);
  }
  50% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(25deg);
  }
}
@keyframes background-color-change {
  0% {
    background-color: #ff5722;
  }
  7% {
    background-color: #e91e63;
  }
  14% {
    background-color: #9c27b0;
  }
  21% {
    background-color: #673ab7;
  }
  28% {
    background-color: #3f51b5;
  }
  35% {
    background-color: #2196f3;
  }
  42% {
    background-color: #03a9f4;
  }
  49% {
    background-color: #00bcd4;
  }
  56% {
    background-color: #009688;
  }
  63% {
    background-color: #4caf50;
  }
  70% {
    background-color: #8bc34a;
  }
  77% {
    background-color: #cddc39;
  }
  84% {
    background-color: #ffc107;
  }
  91% {
    background-color: #ff9800;
  }
  100% {
    background-color: #ff5722;
  }
}